{% load static %}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Cyphon</title>
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
    />
    <link
      href='https://api.mapbox.com/mapbox-gl-js/v0.36.0/mapbox-gl.css'
      rel='stylesheet'
    />
    <link rel="stylesheet" href="{{ css_url }}">

    {% if notifications_enabled %}
      <link rel="manifest" href="/manifest.json">
    {% endif %}

    <script src='https://api.mapbox.com/mapbox-gl-js/v0.37.0/mapbox-gl.js'></script>
  </head>
  <body>
    <div id="app" class="flex-frame"></div>
    <script type="text/javascript">
      window.CONFIG = {
        APP_CONTAINER_ID: 'app',
        APP_BASE_URL: '/app',
        CURRENT_USER: {
          id: {{ request.user.id }},
          first_name: '{{ request.user.first_name }}',
          last_name: '{{ request.user.last_name }}',
          is_staff: {{ request.user.is_staff | lower }},
          email: '{{ request.user.email }}'
        },
        API_URL: '/api/v1',
        ADMIN_URL: '/admin/',
        CYPHON_LOGO_URL: '{% static 'images/cyphon-logo.svg' %}',
        API_TIMEOUT: {{ api_timeout }},
        NOTIFICATIONS_SERVICE_WORKER_URL: '/sw.js',
        NOTIFICATIONS_ENABLED: {{ notifications_enabled | lower }},
        MAPBOX_ACCESS_TOKEN: '{{ mapbox_access_token }}',
        CYPHON_VERSION: '{{ cyphon_version }}'
      };
    </script>

    <script src="{{ js_url }}"></script>

  </body>
</html>